<template>
  <div id="index">
    <el-container>
      <el-aside width="150px">
        <el-menu
                default-active="/accountManagement"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#2E3F56"
                text-color="#fff"
                active-text-color="#409EFF">
<!--                      <el-submenu index=""-->
<!--                                  height="200px">-->
<!--                        <template slot="title">-->
<!--                          <div class="icon"><i class="el-icon-user"></i></div>-->
<!--                          <span>基本配置管理</span>-->
<!--                        </template>-->
<!--                        <el-menu-item-group>-->
<!--                          <template slot="title"></template>-->
<!--                          <el-menu-item index="1-1">选项1</el-menu-item>-->
<!--                          <el-menu-item index="1-2">选项2</el-menu-item>-->
<!--                        </el-menu-item-group>-->
<!--                      </el-submenu>-->
         <el-menu-item>
          <el-image :src="url"
                    style="width: 50px;height: 50px"
                    fit="fill"></el-image>
         </el-menu-item>
          <router-link to="/accountManagement">
            <el-menu-item index="/accountManagement">
              <div class="icon"> <i class="el-icon-user"></i></div>
              <span slot="title">账号管理</span>
            </el-menu-item></router-link>

          <router-link to="/checkedRecord">
            <el-menu-item index="/checkedRecord">
              <div class="icon"> <i class="el-icon-date"></i></div>
              <span slot="title">打卡记录</span>
            </el-menu-item></router-link>

          <router-link to="/uncheckedList">
            <el-menu-item index="uncheckedList">
              <div class="icon"><i class="el-icon-tickets"></i></div>
              <span slot="title">未打卡名单</span>
            </el-menu-item>
          </router-link>

          <router-link to="statisticManagement">
            <el-menu-item index="statisticManagement">
              <div class="icon">  <i class="el-icon-paperclip"></i></div>
              <span slot="title">统计管理</span>
            </el-menu-item>
          </router-link>

        </el-menu>
      </el-aside>

      <el-container>
        <el-header>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 50px">
            <el-breadcrumb-item>
              <i class="el-icon-s-fold" style="font-size: 18px;margin-right: 10px"></i>
              {{$route.meta}}
            </el-breadcrumb-item>
          </el-breadcrumb>
          <div class="info">
            {{admin}}
            <router-link to="/logout"
                         style="color:#409EFF;margin:0 15px">退出</router-link>
          </div>
        </el-header>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import MainTabBar from 'components/content/mainTabbBar/MainTabBar'
  export default {
    name: "Index",
    components: {
      MainTabBar
    },
    data(){
      return{
        admin: '',
        url:'http://quj3ic5hl.hd-bkt.clouddn.com/title.png\n'
      }
    },
    mounted() {
      this.admin = this.$store.getters.getAdmin
    },
    methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>

<style scoped>
  #index{
    height: 100%;
    display: flex;
    font-size: 18px;
  }
  /deep/ .el-header{
    display: flex;
    background-color: #EFF1F6;
    color: #333;
    height: 50px !important;
    line-height: 50px;
  }
  .info{
    float: right;
    color: black;
    flex: 1;
    text-align: right;
  }

  .el-aside {
    background-color: #1f1c1c;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
  }
  .el-menu-vertical-demo{
    height: 100%;
  }
  /deep/ .el-menu-item{
    padding: 0 !important;
    height: 60px;
  }
  i,span{
    font-size: 16px;
  }
  .icon{
    display: inline-block;
    width: 40px;
    text-align: center;
  }
</style>